<template>
  <el-dialog title="重置排序" v-model="dialogVisible" width="600px" :close-on-click-modal="false">
    <div class="sort-container">
      <div class="header">
        <div class="field-col">排序字段</div>
        <div class="switch-col">是否开启</div>
        <div class="sort-col">排序方式</div>
      </div>

      <draggable v-model="sortFields" item-key="field" handle=".drag-handle" class="sort-list">
        <template #item="{ element, index }">
          <div class="sort-item">
            <div class="field-col">
              <span class="index">{{ index + 1 }}.</span>
              <span class="name">{{ element.name }}</span>
            </div>
            <div class="switch-col">
              <el-switch v-model="element.isOpen" />
            </div>
            <div class="sort-col">
              <el-radio-group 
                v-model="element.sortType" 
                size="small" 
                :disabled="!element.isOpen"
              >
                <!-- 为啥要反着来，去问后端 -->
                <el-radio-button label="asc">降序</el-radio-button>
                <el-radio-button label="desc">升序</el-radio-button>
              </el-radio-group>
              <i class="iconfont drag-handle">&#xe7dc;</i>
            </div>
          </div>
        </template>
      </draggable>
    </div>

    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确认</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { resetSort } from '@/api/content'
import { ElMessage } from 'element-plus'
import draggable from 'vuedraggable'

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  orderFields: {
    type: Array,
    default: () => []
  },
  catId: {
    type: Number,
    default: null
  }
})
const emits = defineEmits(['update:show', 'sort'])

const dialogVisible = computed({
  get: () => props.show,
  set: (value) => emits('update:show', value)
})

// 排序字段数据
const sortFields = ref([])
watch(() => props.orderFields, (newVal) => {
  sortFields.value = newVal.map(item => ({
    ...item,
    isOpen: false,
    sortType: 'asc'
  }))
}, { deep: true })

// 确认按钮
const handleConfirm = async () => {
  const list = sortFields.value.filter(item => item.isOpen)
  const orderFields = list.map(item => item.field)
  const orderTypeMap = {}
  list.forEach(item => {
    orderTypeMap[item.field] = item.sortType
  })
  const data = {
    catId: props.catId,
    orderFields,
    orderTypeMap
  }
  const res = await resetSort(data)
  if (res.code === 20000) {
    ElMessage.success('排序成功')
    emits('sort')
  }
  dialogVisible.value = false
}

</script>

<style lang="scss" scoped>
.sort-container {
  padding: 0 20px;

  .header {
    display: flex;
    margin-bottom: 20px;
    color: #909399;
    font-size: 14px;

    .field-col {
      width: 200px;
    }

    .switch-col {
      width: 100px;
    }

    .sort-col {
      flex: 1;
      padding-left: 20px;
    }
  }
}

.sort-list {
  .sort-item {
    display: flex;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid #EBEEF5;

    .field-col {
      width: 200px;
      display: flex;
      align-items: center;

      .index {
        width: 30px;
        color: #909399;
      }

      .name {
        flex: 1;
      }
    }

    .switch-col {
      width: 100px;
    }

    .sort-col {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-left: 20px;

      .drag-handle {
        cursor: move;
        color: $mainColor;
        margin-left: 20px;
      }
    }
  }
}
</style>